<template>
  <div class="app-container">
    <div class="filter-container">
      <el-select v-model="searchForm.sid" class="filter-item" style="width: 110px;" clearable filterable :loading="loading" placeholder="选择区服">
        <el-option
          v-for="item in serverList"
          :key="item.sid"
          :label="item.name+'('+item.sid+')'"
          :value="item.sid"
        >
        </el-option>
      </el-select>
      <el-date-picker v-model="searchForm.startDate" class="filter-item" type="date" style="width: 160px;" placeholder="开始时间"></el-date-picker>-
      <el-date-picker v-model="searchForm.endDate" class="filter-item" type="date" style="width: 160px;" placeholder="结束时间"></el-date-picker>
      <el-button class="filter-item" type="primary" plain icon="el-icon-search" @click="handleFilter">搜索</el-button>
    </div>
    <div ref="echartsContainer" style="width: 100%; height: 400px;"></div>
    <el-table v-loading="listLoading" :data="list" border>
      <el-table-column label="时间" prop="date" width="100px" align="center"></el-table-column>
      <el-table-column label="5分钟" prop="5" width="100px" align="center"></el-table-column>
      <el-table-column label="5-10分钟" prop="10" width="100px" align="center"></el-table-column>
      <el-table-column label="10-20分钟" prop="20" width="100px" align="center"></el-table-column>
      <el-table-column label="20-30分钟" prop="30" width="100px" align="center"></el-table-column>
      <el-table-column label="30-60分钟" prop="60" width="100px" align="center"></el-table-column>
      <el-table-column label="60-120分钟" prop="120" width="100px" align="center"></el-table-column>
      <el-table-column label="120-180分钟" prop="180" width="100px" align="center"></el-table-column>
      <el-table-column label="180-240分钟" prop="240" width="100px" align="center"></el-table-column>
      <el-table-column label="240-300分钟" prop="300" width="100px" align="center"></el-table-column>
      <el-table-column label="300-360分钟" prop="360" width="100px" align="center"></el-table-column>
      <el-table-column label="360分钟以上" prop="361" width="100px" align="center"></el-table-column>
    </el-table>
  </div>
</template>

<script>
import * as echarts from 'echarts'
import { getServerList } from '@/api/ops'
import { getOnlineDurationList } from '@/api/statis'

const fieldMap = {
  '5': '5分钟',
  '10': '5-10分钟',
  '20': '10-20分钟',
  '30': '20-30分钟',
  '60': '30-60分钟',
  '120': '60-120分钟',
  '180': '120-180分钟',
  '240': '180-240分钟',
  '300': '240-300分钟',
  '360': '300-360分钟',
  '361': '360分钟以上'
}
export default {
  name: 'OnlineDuration',
  data() {
    return {
      list: [],
      hourList: [],
      serverList: [],
      pieData: [],
      chartSeriesRegisterData: [],
      chartSeriesDauData: [],
      chartxAxisData: [],
      loading: false,
      listLoading: false,
      searchForm: {
        sid: '',
        startDate: new Date(Date.now() - 86400000 * 10),
        endDate: new Date()
      }
    }
  },
  mounted() {

  },
  created() {
    this.getList()
    this.getServerList()
  },
  methods: {
    handleFilter() {
      this.getList()
    },
    async getList() {
      this.listLoading = true
      const res = await getOnlineDurationList(this.searchForm)
      this.listLoading = false
      this.list = res.data
      if (res.data.length > 0) {
        const last = res.data[res.data.length - 1]
        const b = []
        for (const m in last) {
          const a = {}
          if (typeof (fieldMap[m]) !== 'undefined') {
            a.name = fieldMap[m]
            a.value = last[m]
            b.push(a)
          }
        }
        this.pieData = b
      }
      this.hanleChart()
    },
    async getServerList() {
      const res = await getServerList()
      this.serverList = res.data.items
      this.loading = false
    },

    hanleChart() {
      this.chartSeriesRegisterData = []
      this.chartSeriesDauData = []
      this.chartxAxisData = []

      this.list.forEach(v => {
        this.chartxAxisData.push(v.date)
        this.chartSeriesRegisterData.push(v.register)
        this.chartSeriesDauData.push(v.dau)
      })

      var myChart = echarts.init(this.$refs.echartsContainer)
      myChart.setOption(
        {
          tooltip: {
            trigger: 'item'
          },
          legend: {
            orient: 'vertical',
            left: 'left'
          },
          series: [
            {
              name: '时长统计',
              type: 'pie',
              radius: '50%',
              data: this.pieData,
              emphasis: {
                itemStyle: {
                  shadowBlur: 10,
                  shadowOffsetX: 0,
                  shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
              }
            }
          ]
        }
      )
    }
  }
}
</script>
